<template>
    <div class="message">
        <div><h1>这是一个收料单主题名称+编号</h1></div>
        <div>
          <el-form
            :inline="true"
            ref="form"
            type="text"
            :model="form"
            :rules="rules"
            size="medium"
            label-width="150px"
            style="margin: 20px 80px 0 10px"
          >
            <el-form-item label="创建人:">
              <span>{{form.createBy}}</span>

            </el-form-item>

            <el-form-item label="创建时间:">
              <span>{{form.createTime}}</span>

            </el-form-item>
            <el-form-item label="最后修改人:">
              <span>{{form.updateBy}}</span>

            </el-form-item>
            <el-form-item label="修改时间:">
              <span>{{form.updateTime}}</span>
            </el-form-item>
          </el-form>
        </div>

        <h2>基础信息</h2>
        <table class="gongying">
            <tr>
                <td>出库类型:{{form.outboundType}}</td>
                <td>关联工单:</td>
                <td>关联项目:{{form.projectNo}}</td>
            </tr>
            <tr>
                <td>出库主题:{{form.outboundTheme}}</td>
                <td>出库时间:{{form.outboundTime}}</td>
                <td>出库单号:{{form.outboundNo}}</td>
            </tr>
            <tr>
                <td>领料人员:{{form.pickingPerson}}</td>
                <td>出库人员:{{form.outboundPerson}}</td>
                <td>出库仓库:{{form.warehouseName}}-{{form.warehouseArea}}</td>
            </tr>
        </table>
        <h3 style="font-size: 24px;width: 141px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  margin: 10px  0  0  5px;">物料明细</h3>
  <!-- 下面表格 -->
      <div class="tables" style="margin-top:20px;">
        <el-form>
          <el-table
            border
            ref="multipleTable"
            :data="Lit"
            tooltip-effect="dark"
            style="width: 100%"

          >
          <!-- @selection-change="handleSelectionChange" -->
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="序号" prop="id" width="120">
            </el-table-column>
            <el-table-column prop="materialType" label="物料类别" width="120">
            </el-table-column>
            <el-table-column
              prop="materialType"
              label="物料类别"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="materialName"
              label="物品名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="outboundNo"
              label="出库单号"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="specifications"
              label="规格"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="本次出库数量"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="Off">关 闭</el-button>
        </div>
      </div>
      </div>
</template>
<script>

import {Querying } from "@/api/material/outboundOrder";
export default{
    data(){
        return{
        dialogTableVisible: false,
        dialogFormVisible: false,
        form:{},
        lit:[],
// 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createBy:null,
        receiptMaterialNo: null,
        categoryName: null,
        supplierTheme: null,
        supplierName: null,
        materialType: null,
        warehouseName: null,
        warehouseArea: null,
        materialPerson: null,
        materialTime: null,
        projectNo: null,
        categoryNo: null,
        specifications:null,
        unit:null,
        materialName:null,
        count:null,
        updateTime:null,
        pickingPerson:null,
        projectNo:null,
        xiangmuming:"这是假的"
      },
        }
    },
    created(){
      Querying(this.$route.query.id).then((response) => {
      this.form = response.data;
      this.Lit = response.data.materialInfoList;
      console.log("form", this.form);
      console.log("Lit", this.Lit);
    });
        console.log("query", this.$route.query.id);
       
    },
    methods:{
        handleUpdate(){
this.dialogTableVisible=true
        },
        Off(){
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="scss" scoped>
h2 {
  width: 141px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-bottom: 1px solid red;
  margin: 60px  0  0  5px;

}
.el-input__inner{
  border: 1px solid ;
}

.dialog-footer {
  text-align: center;
  margin-top: 15px;

}
.outers .headers {
  width: 100%;
  height: 50px;

  border-bottom: 1px solid gainsboro;
  h1 {
    margin-left: 50px;
    padding-top: 10px;
  }
}

.bottom {
  margin-left: 30px;
  margin-top: 0px;
  .adds {
    display: flex;
    margin-bottom: 10px;
  }
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.message {
  padding-left: 20px;
  width: 50%vh;
  height: 170px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  border: 1px solid gainsboro;
  border-radius: 1rem;
  margin-top: 15px;
  span {
    font-size: 20px;
    margin-right: 120px;
  }
}
.gongying{
    width:100%;
    text-align: center;
    tr{
        height:50px;
        line-height: 50px;
    }
}
</style>
